<template>
  <el-input
    v-model="keyword"
    style="margin-bottom:10px"
    type="text"
    prefix-icon="el-icon-search"
    size="small"
    placeholder="输入员工姓名全员搜索"
    @input="searchValue"
  />
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    searchValue() {
      // 防抖最核心代码：利用时间差，在上一次的任务还没有开始执行时，就把他清理掉，时间间隔就会重新计算到下一周期
      clearTimeout(this.timer)
      // 提示：this.timer 仅仅是使用JS基础语法给组件实例动态设置属性而已
      this.timer = setTimeout(() => {
        this.$emit('searchValue', this.keyword)
        console.log(this.keyword)
      }, 300) // 回调时300毫秒之后才会执行，有时间差
    }
  }
}
</script>

<style>

</style>
